import { PureComponent, Fragment } from "react";
import { Picker, DatePicker } from "antd-mobile";
import MToast from "../../Util/MToast"
import { isNull, combineDefaultStr, handleDateFunc, timeZero, timeMsec } from "../../../utils/helper"
import moment from "moment"
import MIcon from "../../MIcon"
interface Props {
	value?: any,
	is_now?: any,
	value_datatype?: string,
	type?: any,
	is_msec?: any,
	onChange?: Function,
	label?: string,
	required?: any,
	disabled?: any,
	show_label?: any,
	tips?: string,
	hasError: boolean,
	errorMsg: string,
	format?: string,
}
interface State {
	value: any,
	pickerStart: Date,
	pickerEnd: Date
}
export default class MyDatePicker extends PureComponent<Props, State> {
	public state: State = {
		value: this.props.value,
		pickerStart: new Date(moment().subtract(50, "years").format("YYYY/MM/DD")),
		pickerEnd: new Date(moment().add(50, "years").format("YYYY/MM/DD"))
	}

	componentWillReceiveProps(nextProps: Props) {
		// Should be a controlled component.
		if ('value' in nextProps) {
			let { value } = nextProps;
			if (isNull(value)) {
				if (value === undefined) {
					let { is_now, value_datatype = "string" } = nextProps;
					let isNumber = value_datatype === "number";
					if (is_now == 1) {
						if (isNumber) {
							let now = moment();
							now = timeZero(now);
							this.changeValue(now)
						}
						else {
							this.changeValue(moment())
						}
					}
				}
			}
			else {
				if (value.toString().indexOf("get") != -1) {
					value = moment(handleDateFunc(value));
					this.changeValue(moment(value))
				}
			}
			this.setState({
				value
			});
		}
	}
	changeValue = (value) => {
		const { value_datatype = "string", type = "date", is_msec = 0 } = this.props;
		let isNumber = value_datatype === "number";
		let mFormat = "";
		if (isNull(value)) {

		}
		else {
			if (type == "year") {
				value.month(1);
				value.day(1);
				mFormat = "YYYY"
			}
			else if (type == "month") {
				value.day(1);
				mFormat = "YYYY-MM"
			}
			else {
				mFormat = "YYYY-MM-DD"
			}
			if (isNumber) {
				value = timeZero(value);
				// value = parseInt(value.valueOf() / 1000)
				value = parseInt((value.valueOf() / timeMsec(is_msec)).toString());
			}
			else {
				value = timeZero(value);
				value = value.format(mFormat)
			}
		}
		if (!('value' in this.props)) {
			this.setState({
				value: value
			});
		}
		this.triggerChange(value);
	};

	triggerChange = (changedValue) => {
		const onChange = this.props.onChange;
		if (onChange) {
			onChange(changedValue);
		}
	};
	onChange = (value) => {
		value = moment(value);
		this.changeValue(value);
	};

	componentDidMount() {
		let { is_now = 0, value_datatype = "string", is_msec } = this.props;
		let { value } = this.state;
		let isNumber = value_datatype === "number";
		if (isNull(value)) {
			if (is_now == 1) {
				if (isNumber) {
					let now = moment();
					now = timeZero(now);
					this.changeValue(now)
				}
				else {
					this.changeValue(moment())
				}
			}
		}
		else {
			if (value.toString().indexOf("get") != -1) {
				value = moment(handleDateFunc(value));
				this.changeValue(moment(value))
			}
		}
	}
	renderRight(value) {
		let month = moment(value).month();
		return new Array(12).fill("").map((i, k) => {
			let activeStyle = {};
			if (k == month) {
				activeStyle = {
					borderBottom: "2px solid #1890ff",
					color: "#1890ff"
				}
			}
			return (
				<div
					onClick={() => {
						console.log("renderRight", value, k)
						let newValue = moment(value).month(k);
						console.log("renderRight", newValue)
						this.onChange(newValue)
					}}
					data-flex='cross:center main:center' style={{ textAlign: "center", height: "100%", ...activeStyle }} key={k}>{k + 1}月</div>
			)
		})
	}
	render() {
		let { label, required, disabled, show_label, tips, type = "date", value_datatype = "string", hasError, errorMsg, format, is_msec = 0 } = this.props;
		let isDisabled = disabled == 1;
		let isShowLabel = isNull(show_label) || show_label == 1;
		let isRequired = required == 1;
		let { value } = this.state;
		let isNumber = value_datatype === "number";
		let isString = value_datatype === "string";

		if (isNull(value)) {

		}
		else {
			if (isNumber) {
				if (is_msec == 0) {
					value = value * 1000;
				}
				value = moment(value);
				if (type == "year") {
					value = value.format("YYYY")
				}
				else if (type == "month") {
					value = value.format("YYYY-MM")
				}
				else {
					value = value.format("YYYY-MM-DD")
				}
				value = new Date(value);
			}
			if (isString) {
				if (typeof value == "object") {
					value = moment(value).format(format);
				}
				value = new Date(value.replace(/-/g, "/"))
			}
		}
		/*if(isNull(value)){
			 
		}
		else{
			if(value.toString().indexOf("get") != -1){
				value = moment(handleDateFunc(value))
			}
			else{
				if(isNumber){
					// value = moment(value * 1000)
					value = moment(value*timeMsec(is_msec))
				}
				else{
					value = moment(value)
				}
			}
		}*/
		console.log("value", value);
		return (
			<div style={{ paddingLeft: "80px", position: "relative", height: "40px", overflow: "hidden" }}>
				<div style={{ width: "80px", position: "absolute", left: "5px" }}>
					<DatePicker
						disabled={isDisabled}
						title={label}
						onChange={this.onChange}
						value={value}
						mode={"year"}
						minDate={this.state.pickerStart}
						maxDate={this.state.pickerEnd}
						format={(val) => {
							let year = val.getFullYear();
							if (isNaN(year)) {
								return;
							}
							let month: any = val.getMonth() + 1;
							month = month < 10 ? "0" + month : month;
							let day: any = val.getDate();
							day = day < 10 ? "0" + day : day;
							if (isNull(format)) {
								format = "YYYY年"
							}
							return format.replace("YYYY", year.toString()).replace("MM", month.toString()).replace("DD", day.toString())
						}}
					>
						<PickerLabel {...this.props} label={label} tips={tips} isShowLabel={isShowLabel} isRequired={isRequired} hasError={hasError} errorMsg={errorMsg} disabled={isDisabled} />
					</DatePicker>
				</div>
				<div style={{ overflow: "auto", borderLeft: "1px solid #e8e8e8" }}>
					<div data-flex='box:mean cross:center' style={{ width: "900px", height: "40px" }}>
						{
							this.renderRight(value)
						}
					</div>
				</div>
			</div>
		)
	}
}
interface PickerLabelProps extends Props {
	onClick?: Function,
	extra?: any,
	isRequired: boolean,
	isShowLabel: boolean,
	label_width?: any,
	label_text_color?: string,
	label_text_align?: any
}
class PickerLabel extends PureComponent<PickerLabelProps> {
	onClick = () => {
		let { onClick } = this.props;
		if (onClick) {
			onClick()
		}
	};
	render() {
		let { extra, label, tips, isRequired, isShowLabel, hasError, errorMsg, label_width, disabled, label_text_color, label_text_align = "left" } = this.props;
		let requiredClass = "am-list-item am-input-item am-list-item-middle";
		if (isRequired) {
			requiredClass += " required"
		}
		if (hasError) {
			requiredClass += " am-input-error"
		}
		if (!isNull(label_text_align)) {
			requiredClass += " label-text-align-" + label_text_align
		}

		let onExtraClick = () => {
			MToast.info(tips, 2, null, false)
		};
		let labelClass = "am-input-label am-input-label-";
		if (isNull(label_width)) {
			labelClass += "3"
		}
		else {
			labelClass += label_width
		}
		return (
			<div>
				<div style={{ fontSize: "16px", lineHeight: "40px" }} onClick={(e) => {
					this.onClick()
				}} data-flex="box:first">

					<div style={{ color: "#888" }} data-flex="dir:right">
						<div className="am-input-error-extra mi" onClick={(e) => {
							e.stopPropagation();
							MToast.info(errorMsg, 2, null, false)
						}}></div>
						{
							!disabled && <MIcon isAntd={true} type="down" style={{ color: "rgb(187, 187, 187)", height: "40px", width: "16px" }} />
						}
						<span style={{ color: isNull(this.props.value) ? "rgb(187,187,187)" : "#000" }}>
							{extra}
						</span>
					</div>
				</div>
			</div>
		)
	}
}
/*
{
	"field": [
		"month"
	],
	"is_now": 1,
	"component_type": "mi-datepicker-scroll",
	"value_datatype": "number"
}

*/
